import React from 'react'
import { Table } from 'antd';

import TableList from './TableList'
import MenuButton from './MenuButton'
import reqwest from 'reqwest';

const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      console.log(1)
    } else if (e.key === '2') {
        console.log(2)
    }
  }

const columns = [{
    title: '',
    dataIndex: 'id',
    width:'10%'
  }, {
    title: '动作名称1',
    dataIndex: 'ss1',
    width:'10%'
  },{
    title: '动作名称',
    dataIndex: 'display_name',
    width:'10%'
  }, {
    title: '英文/拼音',
    dataIndex: 'action_name',
    width:'10%'
  }, {
    title: '是否受限',
    dataIndex: 'restricted',
    width:'10%',
    render:(text,record,index)=>{
        return `${record.restricted}`
      }
  }, {
    title: '排序',
    dataIndex: 'display_order',
    width:'10%'
  }, {
    title: '方法',
    dataIndex: 'request_method',
    width:'10%'
  }, {
    title: '访问路径',
    dataIndex: 'request_path',
    width:'10%'
  }, {
  title: '描述',
  dataIndex: 'description',
  width:'10%'
}, {
  title: 'action',
  dataIndex: 'action',
  render:(text,record,index)=>{
    return <MenuButton onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '修改',icon:'save' }, { key: '2', name: '删除',icon:'delete' }]} />
  }
}];


class TableDemo2 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            data:[],
            dataKey:[],
        }
    }

    componentDidMount(){
        reqwest({
            url:'http://admin.mapboom.cn/auth/v1.0/service_action/list?q=%7B%22filters%22:%5B%7B%22name%22:%22service_id%22,%22val%22:2,%22op%22:%22%3D%3D%22%7D%5D,%22order_by%22:%5B%7B%22field%22:%22display_order%22,%22direction%22:%22asc%22%7D%5D%7D',
            method: 'get',
            type: 'json',
          }).then((data) => {
            console.log(data)
            let keyArr = [];
            for (var key in data.data) {
                keyArr.push(key)
            }
            this.setState({
                data: data.data,
                dataKey: keyArr
            })
          });
          
    }
    render(){
        return (
            <div>
                {
                    this.state.dataKey.map((item,index) => {
                        return (
                            <Table
                                key = {index}
                                rowKey = {record => record.id}
                                pagination={false}
                                showHeader={false}
                                columns={columns}
                                dataSource={this.state.data[item]}
                                bordered
                                title={() => item}
                            />
                        )
                    })
                }
                {/* <Table
                    pagination={false}
                    showHeader={false}
                    columns={columns}
                    dataSource={data}
                    bordered
                    title={() => 'Header'}
                /> */}
                {/* <TableList 
                columns={columns}
                data={data}
                title={'123'}
                /> */}
            </div>
        )
    }
}

export default TableDemo2